<template>
  <div class="block" >
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    <el-button type="primary" icon="search" @click="query()">查询</el-button>
    <div id="info">
      <span>收入记录总数：{{exCount}}</span><br><br>
      <span>收入总额：{{exSum}}</span><br><br>
      <span>支出记录总数：{{inCount}}</span><br><br>
      <span>支出总额：{{inSum}}</span><br><br>
      <br>
<!--      {{value2[0]}}-->
<!--      <br>-->
<!--      {{value2[1]}}-->
    </div>

  </div>
</template>

<script>
  export default {
    name: "sum",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
        value2: '',
        exCount: '0',
        exSum: '0',
        inCount: '0',
        inSum: '0',
        userId: '',
      };
    },
    methods: {
      query() {
        let beginDate;
        let endDate;
        let _this = this;
        if(this.value2 != null) {
          beginDate= this.value2[0];
          endDate= this.value2[1];
        }
        let para = {

          beginDate: beginDate,
          endDate: endDate,
          userId: this.userId,
        };
        console.log(para);
        this.$axios.post("/Count", para).then(resp => {
          _this.exCount = resp.data.exCount;
          _this.exSum = resp.data.exSum;
          _this.inCount = resp.data.inCount;
          _this.inSum = resp.data.inSum;
        })
      }
    },
    created() {
      let _this = this;
      this.$axios.get("/user/" + this.$store.state.user.username).then(resp => {
        _this.userId = resp.data;
      });
    }
  };
</script>

<style scoped>
 .block{
   /*float: left;*/
 }

  #info{
    margin: 50px;
    text-align: left;
  }
</style>
